<script src="@/js/tool/meihua.js"></script>

<template>
  <div class="meihua" id="app">
    <div class="margins">

      <!-- 导航 -->
      <el-affix>
        <div class="affix">
          <Breadcrumb separator=">">
            <span v-for="item in navigations" :key="item">
              <BreadcrumbItem :to="item.link">
                <Icon :type="item.icon" />
                {{ item.title }}
              </BreadcrumbItem>
            </span>
          </Breadcrumb>

          <div class="divider">
            <el-divider />
          </div>

          <div class="prediction">
            <span v-for="item in fasts" :key="item" class="spacing">
              <router-link :to="item.link">
                <Tag color="default" class="tag">
                  <span class="item">{{ item.title }}</span>
                  <!-- <Icon :type="item.icon" /> -->
                </Tag>
              </router-link>
            </span>
            <span class="r"></span>
          </div>
        </div>
      </el-affix>

      <div v-if="dataStatus">

        <!-- ★ 示例数据、选项 ★ -->
        <div v-show="dataShiLiStatus">
          <Row class="sl-row">

            <!-- 1、示例数据 -->
            <Col span="16">
            <el-card shadow="never" class="sl-card">

              <template #header>
                <div class="header">
                  示例预览
                </div>
              </template>

              <Row>

                <!-- 1.1、基础数据 -->
                <Col span="9">
                <el-card shadow="never" class="jc-card">
                  <div class="data">

                    <div>
                      <span v-show="dateType === 0">
                        <Tag size="medium" color="#969696" class="tag">
                          <b>公历：</b>{{ data.solarStr }}
                        </Tag>
                      </span>
                      <span v-show="dateType === 1">
                        <Tag size="medium" class="tag">
                          <b>公历：</b>{{ data.solarStr }}
                        </Tag>
                      </span>
                    </div>

                    <div>
                      <span v-show="dateType === 0">
                        <Tag size="medium" class="tag">
                          <b>农历：</b>{{ data.lunarStr }}
                        </Tag>
                      </span>
                      <span v-show="dateType === 1">
                        <Tag size="medium" color="#969696" class="tag">
                          <b>农历：</b>{{ data.lunarStr }}
                        </Tag>
                      </span>
                    </div>

                    <div>
                      <Tag size="medium" class="tag">
                        <b>干支：</b>{{ data.baZi.join('&nbsp;&nbsp;') }}
                      </Tag>
                    </div>

                    <div>
                      <Tag size="medium" class="tag">
                        <b>五行：</b>
                        <span v-for="index in data.baZiWuXing.length" :key="index">
                          <span v-html="wxc(data.baZiWuXing[index - 1])"></span>
                          <span v-if="index !== data.baZiWuXing.length">&nbsp;&nbsp;</span>
                        </span>
                      </Tag>
                    </div>

                    <div>
                      <Tag size="medium" class="tag">
                        <b>空亡：</b>{{ data.baZiXunKong.join('&nbsp;&nbsp;') }}
                      </Tag>
                    </div>

                    <div>
                      <Tag size="medium" class="tag">
                        <b>纳音：</b>{{ data.baZiNaYin.join('&nbsp;&nbsp;') }}
                      </Tag>
                    </div>

                  </div>
                </el-card>
                </Col>

                <!-- 1.2、卦象 -->
                <Col span="15">
                <el-card shadow="never" class="gx-card">
                  <div class="data">
                    <div class="gx">

                      <!-- 上半部分 -->
                      <div class="top">
                        <div class="left">
                          <span class="name">缘主</span>
                        </div>
                        <div class="right">
                          <span class="week">星期：{{ data.week }}</span>
                        </div>
                      </div>

                      <!-- 下半部分 -->
                      <el-card class="bottom" shadow="never">

                        <!-- 本卦 -->
                        <div class="g">

                          <el-card shadow="never" class="card-t">
                            <div class="title">
                              <Tag color="default">本卦&nbsp;&nbsp;·&nbsp;&nbsp;{{ data.benGua }}</Tag>
                            </div>
                          </el-card>

                          <el-card shadow="never" class="card-b mb">
                            <div class="naming">
                              <span class="ym">爻名</span>
                              <span class="gx">卦象</span>
                              <span class="yc">爻辞</span>
                            </div>
                            <div class="yaoming" v-if="data.benGuaLiuYaoName">
                              <div v-for="index in sixGuaIndex.length" :key="index">
                                {{ data.benGuaLiuYaoName[sixGuaIndex[index - 1]] }}
                              </div>
                            </div>
                            <div class="guaxiang" v-if="data.benGuaAs">
                              <div>{{ data.benGuaAs }}</div>
                            </div>
                            <div class="yaoci" v-if="data.benGuaLiuYaoYaoCi">
                              <div v-for="index in sixGuaIndex.length" :key="index">
                                <b>{{ data.benGuaLiuYaoYaoCi[sixGuaIndex[index - 1]] }}</b>
                              </div>
                            </div>
                          </el-card>

                        </div>

                        <!-- 变卦 -->
                        <div class="g">

                          <el-card shadow="never" class="card-t">
                            <div class="title">
                              <Tag color="default">变卦&nbsp;&nbsp;·&nbsp;&nbsp;{{ data.bianGua }}</Tag>
                            </div>
                          </el-card>

                          <el-card shadow="never" class="card-b mb">
                            <div class="naming">
                              <span class="ym">爻名</span>
                              <span class="gx">卦象</span>
                              <span class="yc">爻辞</span>
                            </div>
                            <div class="yaoming" v-if="data.bianGuaLiuYaoName">
                              <div v-for="index in sixGuaIndex.length" :key="index">
                                {{ data.bianGuaLiuYaoName[sixGuaIndex[index - 1]] }}
                              </div>
                            </div>
                            <div class="guaxiang" v-if="data.bianGuaAs">
                              <div>{{ data.bianGuaAs }}</div>
                            </div>
                            <div class="yaoci" v-if="data.bianGuaLiuYaoYaoCi">
                              <div v-for="index in sixGuaIndex.length" :key="index">
                                <b>{{ data.bianGuaLiuYaoYaoCi[sixGuaIndex[index - 1]] }}</b>
                              </div>
                            </div>
                          </el-card>

                        </div>

                      </el-card>

                    </div>
                  </div>
                </el-card>
                </Col>

              </Row>
            </el-card>
            </Col>

            <!-- 2、选项 -->
            <Col span="8">
            <el-card shadow="never" class="xx-card">

              <template #header>
                <div class="header">
                  梅花易数起卦
                </div>
              </template>

              <div class="data">

                <div class="name">
                  <input placeholder="请输入姓名（选填）" v-model="name" maxlength="10" />
                </div>

                <div class="occupy">
                  <input placeholder="请输入占事（选填）" v-model="occupy" maxlength="10" @click="occupyPrompt" />
                </div>

                <div class="dateType">
                  <el-segmented class="segmented" :disabled="!dateStatus" v-model="dateTypeStr"
                    :options="dateTypeOptions" />
                </div>

                <div class="sex">
                  <el-segmented class="segmented" v-model="sexStr" :options="sexOptions" />
                </div>

                <div class="date">
                  <el-date-picker :clearable="false" v-model="date" type="datetime" format="YYYY-MM-DD HH:mm:ss"
                    placeholder="请选择日期" :editable="false" :disabled="!dateStatus" style="width:70%;"
                    @change="initializeData" />
                  <Checkbox v-model="leapMonth" :disabled="!leapMonthStatus" class="leapMonth">
                    <span>闰月</span>
                  </Checkbox>
                </div>

                <div class="trueSolar">
                  <Checkbox v-model="trueSolar" class="trueSolar" disabled="true">
                    <span>真太阳时</span>
                  </Checkbox>

                  <!-- <el-tooltip placement="top" :enterable="false">
                  <template #content>
                    <div style="color: #ffbf00;">
                      生效时间：每日6时~7时。
                    </div>
                    <br />
                    <div>
                      暂不支持使用真太阳时预览，请排盘后查看；<br />
                      此功能可能导致排盘速度缓慢或其他未知问题。
                    </div>
                  </template>
                  <Icon type="md-alert" />
                </el-tooltip> -->

                  <el-tooltip placement="top" :enterable="false">
                    <template #content>
                      <div>
                        功能正在完善中 ...
                      </div>
                    </template>
                    <Icon type="md-alert" />
                  </el-tooltip>

                  <span class="beta">&nbsp;beta&nbsp;</span>
                </div>

                <!-- <div class="address" v-if="trueSolar">
                <el-tooltip placement="top" :enterable="false">
                  <template #content>
                    默认按照东八区120°经度时刻（标准时间）排盘；
                    <br />
                    若更换地区（非北京市的其他地区），则使用真太阳时排盘。
                  </template>
                  <Icon type="md-help-circle" />
                </el-tooltip>
                地区：
                <City transfer class="city" v-model="address" show-suffix @on-change="getAddressName" />
              </div> -->

                <div class="qiGuaMode">
                  起卦模式：
                  <Select v-model="qiGuaMode" style="width:210px;">
                    <template #prefix>
                      <span class="prefix">
                        <Icon type="ios-planet-outline" />
                      </span>
                    </template>
                    <Option v-for="item in qiGuaModeOptions " :label="item.label" :value="item.value">
                      {{ item.label }}
                      <span v-if="item.value === 0" class="moren">
                        <Icon type="md-arrow-dropleft-circle" />
                        默认
                      </span>
                    </Option>
                  </Select>
                  <el-tooltip placement="top" :enterable="false">
                    <template #content>
                      <b>日期起卦：</b>使用日期进行起卦。<br />
                      <b>数字起卦：</b>使用一个三位数进行起卦。<br />
                      <b>单数起卦：</b>使用一个数进行起卦。<br />
                      <b>双数起卦：</b>使用两个数进行起卦。<br /><br />
                      <div style="color: #ffbf00">
                        <Icon type="md-checkmark-circle-outline" />
                        以上方式在业界均持有赞否两论，请善用者用之。
                      </div>
                    </template>
                    <Icon class="tip" type="md-information-circle" />
                  </el-tooltip>
                </div>

                <div class="number">

                  <div v-if="qiGuaMode === 1">
                    数字：
                    <el-input clearable maxlength="3" show-word-limit v-model.number="number" placeholder="请输入一个三位数"
                      oninput="value=value.replace(/^\.+|[^\d.]/g,'')" style="width:239px;"></el-input>
                  </div>
                  <div v-if="qiGuaMode === 2">
                    单数：
                    <el-input clearable maxlength="9" show-word-limit v-model.number="danNumber" placeholder="请输入一个数"
                      oninput="value=value.replace(/^\.+|[^\d.]/g,'')" style="width:239px;"></el-input>
                  </div>
                  <div v-if="qiGuaMode === 3">
                    数字一：
                    <el-input clearable maxlength="9" show-word-limit v-model.number="shuangNumber1"
                      placeholder="请输入一个数字一" oninput="value=value.replace(/^\.+|[^\d.]/g,'')" style="width:225px;">
                    </el-input>
                  </div>
                  <div v-if="qiGuaMode === 3" class="mt-9">
                    数字二：
                    <el-input clearable maxlength="9" show-word-limit v-model.number="shuangNumber2"
                      placeholder="请输入一个数字二" oninput="value=value.replace(/^\.+|[^\d.]/g,'')" style="width:225px;">
                    </el-input>
                  </div>
                  <div v-if="qiGuaMode === 3" class="mt-9">
                    <Checkbox v-model="shuangNumberInSx">
                      <span>双数求和取上下卦</span>
                    </Checkbox>
                    <Checkbox v-model="shuangNumberInDong">
                      <span>双数求和加时辰数取动爻</span>
                    </Checkbox>
                  </div>
                </div>

                <div class="resetting" @click="resetting">
                  <Button shape="circle" size="small">
                    <Icon type="md-refresh" />
                    重置
                  </Button>
                  <Checkbox v-model="resDate" class="resDate">
                    <span>包括日期</span>
                  </Checkbox>
                </div>

                <div class="senior">
                  <Button shape="circle" size="small" @click="seniorDialog = true">
                    <Icon type="ios-settings" />
                    更多选项
                  </Button>
                </div>

                <div class="starts">
                  <el-button :disabled="!startsButton" style="width: 100%" class="button" @click="starts">
                    开始起卦
                    <span v-show="trueSolar" style="font-size:13px;">(真太阳时)</span>
                  </el-button>
                </div>

              </div>

            </el-card>
            </Col>

          </Row>
        </div>

        <!-- ★ 完整数据切换选项、完整数据 ★ -->
        <div v-show="!dataShiLiStatus">
          <Row class="wz-row">

            <!-- 1、完整数据切换选项 -->
            <Col span="3">
            <el-card shadow="never" class="wzqh-card">
              <div class="data">

                <div class="button1" @click="dataShiLiStatus = true">
                  <Icon type="ios-undo" />
                  返回
                </div>

                <div class="button2" @click="dataAllPageMethod(1)">
                  <b v-show="dataAllPage === 1">
                    基本信息
                    <Icon type="md-arrow-dropright-circle" />
                  </b>
                  <span v-show="dataAllPage !== 1">
                    基本信息
                  </span>
                </div>

                <div class="button2" @click="gengduoPrompt">
                  更多信息 ...
                </div>

              </div>
            </el-card>
            </Col>

            <!-- 2、完整数据 -->
            <Col span="21">
            <el-card shadow="never" class="wz-card">
              <div class="data">

                <!-- 2.1、基本信息 -->
                <div class="jb" v-show="dataAllPage == 1">

                  <!-- 上半部分 -->
                  <div class="top">
                    <Row>
                      <Col span="15">
                      <span class="name">
                        <Ellipsis :text="data.name" :length="3" tooltip />
                      </span>
                      <span class="date">
                        <span class="mr">公历：{{ data.solarStr }}</span>
                        <span class="mr">农历：{{ data.lunarStr }}</span>
                      </span></Col>
                      <Col span="9">
                      <span class="week">星期：{{ data.week }}</span></Col>
                    </Row>
                  </div>

                  <!-- 下半部分 -->
                  <div class="bottom">

                    <!-- 数据一 -->
                    <div class="jb1">

                      <Row class="bc1">
                        <Col span="8">
                        <span class="title">姓名性别</span>
                        <span>{{ data.name }}</span>
                        <span>（{{ data.sex }}）</span>
                        </Col>
                        <Col span="8">
                        <span class="title">缘主占事</span>
                        <span v-if="data.occupy == ''" class="null">未知</span>
                        <span v-if="data.occupy != ''">{{ data.occupy }}</span>
                        </Col>
                        <Col span="8">
                        <span class="title">生辰八字</span>
                        <span>{{ data.baZi.join('&nbsp;&nbsp;') }}</span>
                        </Col>
                      </Row>

                      <Row class="bc2">
                        <Col span="8">
                        <span class="title">八字五行</span>
                        <span v-for="index in data.baZiWuXing.length" :key="index">
                          <span v-html="wxc(data.baZiWuXing[index - 1])"></span>
                          <span v-if="index !== data.baZiWuXing.length">&nbsp;&nbsp;</span>
                        </span>
                        </Col>
                        <Col span="8">
                        <span class="title">八字空亡</span>
                        <span>{{ data.baZiXunKong.join('&nbsp;&nbsp;') }}</span>
                        </Col>
                        <Col span="8">
                        <span class="title2">八字纳音</span>
                        <span>{{ data.baZiNaYin.join('&nbsp;&nbsp;') }}</span>
                        </Col>
                      </Row>

                    </div>

                    <!-- 数据二 -->
                    <div class="jb2">

                      <!-- 本卦 -->
                      <div class="g">

                        <el-card shadow="never" class="card-t">
                          <div class="title">
                            <Tag color="default">本卦&nbsp;&nbsp;·&nbsp;&nbsp;{{ data.benGua }}</Tag>
                          </div>
                        </el-card>

                        <el-card shadow="never" class="card-b">
                          <div class="naming">
                            <span class="ym">爻名</span>
                            <span class="gx">卦象</span>
                            <span class="yc">爻辞</span>
                          </div>
                          <div class="yaoming" v-if="data.benGuaLiuYaoName">
                            <div v-for="index in sixGuaIndex.length" :key="index">
                              {{ data.benGuaLiuYaoName[sixGuaIndex[index - 1]] }}
                            </div>
                          </div>
                          <div class="guaxiang" v-if="data.benGuaAs">
                            <div>{{ data.benGuaAs }}</div>
                          </div>
                          <div class="yaoci" v-if="data.benGuaLiuYaoYaoCi">
                            <div v-for="index in sixGuaIndex.length" :key="index">
                              <b>{{ data.benGuaLiuYaoYaoCi[sixGuaIndex[index - 1]] }}</b>
                            </div>
                          </div>
                          <div class="divider">
                            <el-divider border-style="dashed" />
                          </div>
                          <div class="ck">
                            <span class="link">
                              <span class="title">参考</span>
                              {{ data.benYongTiLink }}
                            </span>
                          </div>
                        </el-card>
                      </div>

                      <!-- 变卦 -->
                      <div class="g">
                        <el-card shadow="never" class="card-t">
                          <div class="title">
                            <Tag color="default">变卦&nbsp;&nbsp;·&nbsp;&nbsp;{{ data.bianGua }}</Tag>
                          </div>
                        </el-card>
                        <el-card shadow="never" class="card-b">
                          <div class="naming">
                            <span class="ym">爻名</span>
                            <span class="gx">卦象</span>
                            <span class="yc">爻辞</span>
                          </div>
                          <div class="yaoming" v-if="data.bianGuaLiuYaoName">
                            <div v-for="index in sixGuaIndex.length" :key="index">
                              {{ data.bianGuaLiuYaoName[sixGuaIndex[index - 1]] }}
                            </div>
                          </div>
                          <div class="guaxiang" v-if="data.bianGuaAs">
                            <div>{{ data.bianGuaAs }}</div>
                          </div>
                          <div class="yaoci" v-if="data.bianGuaLiuYaoYaoCi">
                            <div v-for="index in sixGuaIndex.length" :key="index">
                              <b>{{ data.bianGuaLiuYaoYaoCi[sixGuaIndex[index - 1]] }}</b>
                            </div>
                          </div>
                          <div class="divider">
                            <el-divider border-style="dashed" />
                          </div>
                          <div class="ck">
                            <span class="link">
                              <span class="title">参考</span>
                              {{ data.bianYongTiLink }}
                            </span>
                          </div>
                        </el-card>
                      </div>

                      <!-- 互卦 -->
                      <div class="g">
                        <el-card shadow="never" class="card-t">
                          <div class="title">
                            <Tag color="default">互卦&nbsp;&nbsp;·&nbsp;&nbsp;{{ data.huGua }}</Tag>
                          </div>
                        </el-card>
                        <el-card shadow="never" class="card-b">
                          <div class="naming">
                            <span class="ym">爻名</span>
                            <span class="gx">卦象</span>
                            <span class="yc">爻辞</span>
                          </div>
                          <div class="yaoming" v-if="data.huGuaLiuYaoName">
                            <div v-for="index in sixGuaIndex.length" :key="index">
                              {{ data.huGuaLiuYaoName[sixGuaIndex[index - 1]] }}
                            </div>
                          </div>
                          <div class="guaxiang" v-if="data.huGuaAs">
                            <div>{{ data.huGuaAs }}</div>
                          </div>
                          <div class="yaoci" v-if="data.huGuaLiuYaoYaoCi">
                            <div v-for="index in sixGuaIndex.length" :key="index">
                              <b>{{ data.huGuaLiuYaoYaoCi[sixGuaIndex[index - 1]] }}</b>
                            </div>
                          </div>
                          <div class="divider">
                            <el-divider border-style="dashed" />
                          </div>
                          <div class="ck">
                            <span class="link">
                              <span class="title">参考</span>
                              {{ data.huYongTiLink }}
                            </span>
                          </div>
                        </el-card>
                      </div>

                      <!-- 错卦 -->
                      <div class="g">
                        <el-card shadow="never" class="card-t">
                          <div class="title">
                            <Tag color="default">错卦&nbsp;&nbsp;·&nbsp;&nbsp;{{ data.cuoGua }}</Tag>
                          </div>
                        </el-card>
                        <el-card shadow="never" class="card-b">
                          <div class="naming">
                            <span class="ym">爻名</span>
                            <span class="gx">卦象</span>
                            <span class="yc">爻辞</span>
                          </div>
                          <div class="yaoming" v-if="data.cuoGuaLiuYaoName">
                            <div v-for="index in sixGuaIndex.length" :key="index">
                              {{ data.cuoGuaLiuYaoName[sixGuaIndex[index - 1]] }}
                            </div>
                          </div>
                          <div class="guaxiang" v-if="data.cuoGuaAs">
                            <div>{{ data.cuoGuaAs }}</div>
                          </div>
                          <div class="yaoci" v-if="data.cuoGuaLiuYaoYaoCi">
                            <div v-for="index in sixGuaIndex.length" :key="index">
                              <b>{{ data.cuoGuaLiuYaoYaoCi[sixGuaIndex[index - 1]] }}</b>
                            </div>
                          </div>
                          <div class="divider">
                            <el-divider border-style="dashed" />
                          </div>
                          <div class="ck">
                            <span class="link">
                              <span class="title">参考</span>
                              {{ data.cuoYongTiLink }}
                            </span>
                          </div>
                        </el-card>
                      </div>

                      <!-- 综卦 -->
                      <div class="g">
                        <el-card shadow="never" class="card-t">
                          <div class="title">
                            <Tag color="default">综卦&nbsp;&nbsp;·&nbsp;&nbsp;{{ data.zongGua }}</Tag>
                          </div>
                        </el-card>
                        <el-card shadow="never" class="card-b mb">
                          <div class="naming">
                            <span class="ym">爻名</span>
                            <span class="gx">卦象</span>
                            <span class="yc">爻辞</span>
                          </div>
                          <div class="yaoming" v-if="data.zongGuaLiuYaoName">
                            <div v-for="index in sixGuaIndex.length" :key="index">
                              {{ data.zongGuaLiuYaoName[sixGuaIndex[index - 1]] }}
                            </div>
                          </div>
                          <div class="guaxiang" v-if="data.zongGuaAs">
                            <div>{{ data.zongGuaAs }}</div>
                          </div>
                          <div class="yaoci" v-if="data.zongGuaLiuYaoYaoCi">
                            <div v-for="index in sixGuaIndex.length" :key="index">
                              <b>{{ data.zongGuaLiuYaoYaoCi[sixGuaIndex[index - 1]] }}</b>
                            </div>
                          </div>
                          <div class="divider">
                            <el-divider border-style="dashed" />
                          </div>
                          <div class="ck">
                            <span class="link">
                              <span class="title">参考</span>
                              {{ data.zongYongTiLink }}
                            </span>
                          </div>
                        </el-card>
                      </div>

                    </div>

                  </div>
                </div>

              </div>
            </el-card>
            </Col>

          </Row>
        </div>

      </div>

      <!-- 更多选项弹窗 -->
      <Modal v-model="seniorDialog" scrollable="ture" class="seniorDialog" :styles="{ top: '80px', minWidth: '550px' }">
        <template #header>
          <b style="font-size:16px;">
            <Icon type="ios-settings" />
            更多选项
          </b>
        </template>

        <div>

          <div>
            年柱（年干支）排法：
            <Select transfer v-model="yearGanZhiSet" style="width:58%;">
              <template #prefix>
                <span style="margin:0 8px 0 5px; vertical-align:-3px;">
                  <Icon type="ios-compass-outline" />
                </span>
              </template>
              <Option v-for="item in yearGanZhiSetOptions " :label="item.label" :value="item.value">
                {{ item.label }}
                <span v-if="item.value === 1" style="float:right; color:#8492a6; font-size:12px;">
                  <Icon type="md-arrow-dropleft-circle" />
                  默认
                </span>
              </Option>
            </Select>
            <span v-if="yearGanZhiSet !== 1" style="font-size:12px; margin-left:10px; color:#969696;">
              <Icon type="md-arrow-dropleft-circle" />
              非默认
            </span>
          </div>
          <div style="margin-top:10px;">
            月柱（月干支）排法：
            <Select transfer v-model="monthGanZhiSet" style="width:58%;">
              <template #prefix>
                <span style="margin:0 8px 0 5px; vertical-align:-3px;">
                  <Icon type="ios-compass-outline" />
                </span>
              </template>
              <Option v-for="item in monthGanZhiSetOptions " :label="item.label" :value="item.value">
                {{ item.label }}
                <span v-if="item.value === 1" style="float:right; color:#8492a6; font-size:12px;">
                  <Icon type="md-arrow-dropleft-circle" />
                  默认
                </span>
              </Option>
            </Select>
            <span v-if="monthGanZhiSet !== 1" style="font-size:12px; margin-left:10px; color:#969696;">
              <Icon type="md-arrow-dropleft-circle" />
              非默认
            </span>
          </div>
          <div style="margin-top:10px;">
            日柱（日干支）排法：
            <Select transfer v-model="dayGanZhiSet" style="width:58%;">
              <template #prefix>
                <span style="margin:0 8px 0 5px; vertical-align:-3px;">
                  <Icon type="ios-compass-outline" />
                </span>
              </template>
              <Option v-for="item in dayGanZhiSetOptions " :label="item.label" :value="item.value">
                {{ item.label }}
                <span v-if="item.value === 0" style="float:right; color:#8492a6; font-size:12px;">
                  <Icon type="md-arrow-dropleft-circle" />
                  默认
                </span>
              </Option>
            </Select>
            <span v-if="dayGanZhiSet !== 0" style="font-size:12px; margin-left:10px; color:#969696;">
              <Icon type="md-arrow-dropleft-circle" />
              非默认
            </span>
          </div>
          <div style="margin-top:10px;">
            时柱（时干支）排法：
            <Select transfer v-model="hourGanZhiSet" style="width:58%;">
              <template #prefix>
                <span style="margin:0 8px 0 5px; vertical-align:-3px;">
                  <Icon type="ios-compass-outline" />
                </span>
              </template>
              <Option v-for="item in hourGanZhiSetOptions " :label="item.label" :value="item.value">
                {{ item.label }}
                <span v-if="item.value === 0" style="float:right; color:#8492a6; font-size:12px;">
                  <Icon type="md-arrow-dropleft-circle" />
                  默认
                </span>
              </Option>
            </Select>
          </div>
        </div>

        <template #footer>
          <Button long @click="seniorDialog = false" style="border-radius:5px;">确认</Button>
        </template>
      </Modal>

      <!-- 四柱转日期弹窗 -->
      <Modal v-model="siZhuDialog" scrollable="ture" class="siZhuDialog" :styles="{ top: '80px', minWidth: '550px' }">
        <template #header>
          <b style="font-size:16px;">
            <Icon type="ios-apps" />
            四柱转日期
          </b>
        </template>

        <div v-if="siZhuToDateTotal === 0" style="height:230px;">
          <div>
            年份查询范围：
            <input placeholder="请输入起始年份" v-model="beginYear" style="width:174px; margin-bottom:28px;" />
            年 ~ 至今
            <a @click="beginYear = 1900" style="font-size:12px; margin-left: 10px;">重置</a>
          </div>
          <div>
            年柱（年干支）：
            <Select transfer v-model="yearGanZhi" style="width:50%;">
              <template #prefix>
                <span style="margin:0 8px 0 5px; vertical-align:-3px;">
                  <Icon type="ios-compass-outline" />
                </span>
              </template>
              <Option v-for="item in ganZhiOptions " :label="item.label" :value="item.value">
                {{ item.label }}
                <span v-if="item.label === yearGanZhi2" style="float:right; color:#8492a6; font-size:12px;">
                  <Icon type="md-arrow-dropleft-circle" />
                  当前年柱（年干支）
                </span>
              </Option>
            </Select>
            <span v-if="yearGanZhi !== yearGanZhi2" style="font-size:12px; margin-left:10px; color:#969696;">
              <Icon type="md-arrow-dropleft-circle" />
              非此刻年柱
            </span>
          </div>
          <div style="margin-top:10px;">
            月柱（月干支）：
            <Select transfer v-model="monthGanZhi" style="width:50%;">
              <template #prefix>
                <span style="margin:0 8px 0 5px; vertical-align:-3px;">
                  <Icon type="ios-compass-outline" />
                </span>
              </template>
              <Option v-for="item in ganZhiOptions " :label="item.label" :value="item.value">
                {{ item.label }}
                <span v-if="item.label === monthGanZhi2" style="float:right; color:#8492a6; font-size:12px;">
                  <Icon type="md-arrow-dropleft-circle" />
                  当前月柱（月干支）
                </span>
              </Option>
            </Select>
            <span v-if="monthGanZhi !== monthGanZhi2" style="font-size:12px; margin-left:10px; color:#969696;">
              <Icon type="md-arrow-dropleft-circle" />
              非此刻月柱
            </span>
          </div>
          <div style="margin-top:10px;">
            日柱（日干支）：
            <Select transfer v-model="dayGanZhi" style="width:50%;">
              <template #prefix>
                <span style="margin:0 8px 0 5px; vertical-align:-3px;">
                  <Icon type="ios-compass-outline" />
                </span>
              </template>
              <Option v-for="item in ganZhiOptions " :label="item.label" :value="item.value">
                {{ item.label }}
                <span v-if="item.label === dayGanZhi2" style="float:right; color:#8492a6; font-size:12px;">
                  <Icon type="md-arrow-dropleft-circle" />
                  当前日柱（日干支）
                </span>
              </Option>
            </Select>
            <span v-if="dayGanZhi !== dayGanZhi2" style="font-size:12px; margin-left:10px; color:#969696;">
              <Icon type="md-arrow-dropleft-circle" />
              非此刻日柱
            </span>
          </div>
          <div style="margin-top:10px;">
            时柱（时干支）：
            <Select transfer v-model="hourGanZhi" style="width:50%;">
              <template #prefix>
                <span style="margin:0 8px 0 5px; vertical-align:-3px;">
                  <Icon type="ios-compass-outline" />
                </span>
              </template>
              <Option v-for="item in ganZhiOptions " :label="item.label" :value="item.value">
                {{ item.label }}
                <span v-if="item.label === hourGanZhi2" style="float:right; color:#8492a6; font-size:12px;">
                  <Icon type="md-arrow-dropleft-circle" />
                  当前时柱（时干支）
                </span>
              </Option>
            </Select>
            <span v-if="hourGanZhi !== hourGanZhi2" style="font-size:12px; margin-left:10px; color:#969696;">
              <Icon type="md-arrow-dropleft-circle" />
              非此刻时柱
            </span>
          </div>
        </div>
        <div v-if="siZhuToDateTotal !== 0" style="height:230px;">
          <Table height="220" size="small" highlight-row :columns="siZhuToDateColumns" :data="siZhuToDate">
            <template #action="{ row, index }">
              <Button type="primary" size="small" @click="setNewDate(row.solar)">选择</Button>
            </template>
          </Table>
          <div style="text-align:center; color:#ababab; margin:5px 0 0 0; font-size:12px;">
            从公元{{ beginYear2 }}年~至今共&nbsp;{{ siZhuToDateTotal }}&nbsp;条日期
            【{{ yearGanZhi2 + '&nbsp;' + monthGanZhi2 + '&nbsp;' + dayGanZhi2 + '&nbsp;' + hourGanZhi2 }}】
          </div>
        </div>

        <template #footer>
          <div style="text-align:center;">
            <span v-if="siZhuToDateTotal === 0">
              <Button v-if="siZhuButton" long @click="getSiZhuToDate" style="border-radius:5px;">获取日期</Button>
              <Button v-else long loading style="border-radius:10px;">日期获取中 ...</Button>
            </span>
            <Button v-else @click="siZhuToDateTotal = 0" long style="border-radius:5px;">重新获取</Button>
          </div>
        </template>
      </Modal>

    </div>
  </div>
</template>

<style scoped lang="scss" src="@/css/tool/meihua.scss"></style>
